import React, { useState } from 'react';
import {
  Table,
  Form,
  Input,
  Select,
  DatePicker,
  Button,
  Space,
  Card,
  Tag,
  message
} from 'antd';
import { SearchOutlined, RestOutlined } from '@ant-design/icons';
import { useRequest } from 'umi';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import dayjs from 'dayjs';
import { OperateLogDO, UserTypeMap } from '../types';
import {  useIntl } from '@umijs/max';
import { pagedLog } from '@/services/system/log_api';
import { formatToLocalTime, toUTC } from "@/utils/time";
const { RangePicker } = DatePicker;
const { Option } = Select;


const OperateLogTable: React.FC = () => {
  const intl = useIntl();
  const [form] = Form.useForm();

  // Table column definitions
  const columns: ProColumns<OperateLogDO>[] = [
    {
      title: intl.formatMessage({ id: 'pages.operateLog.id' }),
      dataIndex: "id",
      width: 80,
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.module' }),
      dataIndex: "type",
      width: 120,
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.subModule' }),
      dataIndex: "subType",
      width: 120,
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.username' }),
      dataIndex: "userName",
      width: 100,
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.ip' }),
      dataIndex: "userIp",
      width: 100,
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.action' }),
      dataIndex: "action",
      ellipsis: true,
      search: true,
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.method' }),
      dataIndex: "requestMethod",
      width: 100,
      search: false,
      render: (text) => (
        <Tag
          color={text === "GET" ? "green" : text === "POST" ? "blue" : "orange"}
        >
          {text}
        </Tag>
      ),
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.time' }),
      dataIndex: "createTime",
      sorter: true,
      valueType: "dateTimeRange",
      hideInForm: true,
      search: {
        transform: (value) => {
          if (!value || !value[0] || !value[1]) return {};
          return {
            startTime: dayjs(value[0]).utc().format(),
            endTime: dayjs(value[1]).utc().format(),
          };
        },
      },
      fieldProps: {
        showTime: {
          format: "HH:mm",
          minuteStep: 1,
        },
        format: "YYYY-MM-DD HH:mm",
      },
      render: (_, record) => {
        return formatToLocalTime(record.createTime);
      },
    },
    {
      title: intl.formatMessage({ id: 'pages.operateLog.bizId' }),
      dataIndex: "bizId",
      ellipsis: true,
      search: false,
    },
  ];

  // Show log details
  const showLogDetail = (record: OperateLogDO) => {
    message.info(intl.formatMessage(
      { id: 'pages.operateLog.viewDetail' },
      { id: record.id }
    ));
    console.log('Log details:', record);
  };

  return (
    <Card bordered={false}>
      <ProTable<OperateLogDO>
        headerTitle={intl.formatMessage({ id: 'pages.operateLog.title' })}
        rowKey="id"
        columns={columns}
        request={pagedLog}
        pagination={{
          pageSize: 10,
          showSizeChanger: true,
        }}
        form={{
          form,
          syncToUrl: true,
          syncToInitialValues: false,
        }}
        search={{
          optionRender: ({ searchText, resetText }, { form }) => [
            <Button
              key="search"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
              icon={<SearchOutlined />}
            >
              {searchText}
            </Button>,
            <Button
              key="reset"
              onClick={() => {
                form?.resetFields();
                form?.submit();
              }}
              icon={<RestOutlined />}
            >
              {resetText}
            </Button>,
          ],
        }}
      />
    </Card>
  );
};

export default OperateLogTable;